<template>
	<view class="bind-alipay-form">
		<view class="bind-alipay-form-cell">
			<text>姓名</text>
			<input type="text" placeholder="请输入支付宝账号真实姓名" placeholder-style="color:#C1C1C1" v-model="form.real_name" />
		</view>
		<view class="bind-alipay-form-cell">
			<text>账号</text>
			<input type="number" placeholder="请输入支付宝账号(手机号码)" placeholder-style="color:#C1C1C1" v-model="form.alipay_sn"  />
		</view>
		<view class="bind-alipay-form-cell">
			<text>验证码</text>
			<input type="number" placeholder="请输入手机验证码" placeholder-style="color:#C1C1C1" v-model="form.code"  />
			<button size="mini" type="primary" @click="getCode" v-if="!isSend" hover-class="">获取验证码</button>
			<button size="mini" type="primary" :disabled="true" v-else>{{count}}s</button>
		</view>
		<view class="bind-alipay-form-tips">注：为确保提现无误，请填写支付宝认证真实姓名，并检查账号是否有误</view>
		<view class="bind-alipay-form-button">
			<button type="primary" :disabled="form.alipay_sn&&form.real_name&&form.code?false:true" @click="submit" hover-class="">
				{{form.alipay_sn?'修改':'确认绑定'}}
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				count: 60,
				isSend: false,
				form: {
					alipay_sn: '',
					real_name: '',
					code: ''
				}
			};
		},
		onLoad(opstions) {
			if(opstions.alipay_sn){
				this.form.alipay_sn = opstions.alipay_sn
				this.form.real_name = opstions.real_name
			}
		},
		methods: {
			// 获取验证码
			getCode(){
				let phoneRexp = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[0-9])\d{8}$/;
				if(!this.form.alipay_sn){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return false
				}else if(!phoneRexp.test(this.form.alipay_sn)){
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号码'
					})
					return false
				}
				this.$api.PhoneGetCode({phone: this.form.alipay_sn,login_code: 'login'}).then(res => {
					uni.showToast({
						icon: 'none',
						title: '发送成功',
						duration: 1500
					})
					this.isSend = true
					let countsDown = setInterval(() => {
						this.count--
						if(this.count==0){
							this.isSend = false
							this.count = 60
							clearInterval(countsDown)
						}
					},1000)
				})
			},
			// 提交绑定
			submit(){
				if(!this.form.alipay_sn){
					uni.showToast({
						icon: 'none',
						title: '请输入支付宝账号',
						duration: 1500
					})
				}else if(!this.form.real_name){
					uni.showToast({
						icon: 'none',
						title: '请输入支付宝姓名',
						duration: 1500
					})
				}else if(!this.form.code){
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return false
				}else{
					this.$api.BindingWallet(this.form).then(res => {
						uni.showToast({
							icon: 'none',
							title: '绑定成功',
							duration: 1500
						})
						setTimeout(() => {
							uni.navigateBack()
						},1500)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.bind-alipay-form{
		padding-top: 20rpx;
		.bind-alipay-form-cell{
			background-color: #FFF;
			display: flex;
			align-items: center;
			border-top: solid 1px #EEE;
			padding: 0 20rpx;
			&:first-child{
				border-top: none;
			}
			text{
				width: 4em;
			}
			input{
				flex: 1;
				padding: 30rpx 0;
				font-size: 28rpx;
			}
		}
		.bind-alipay-form-tips{
			padding: 20rpx 20rpx 0;
			font-size: 24rpx;
			color: #F91313;
			line-height: 36rpx;
		}
		.bind-alipay-form-button{
			padding: 80rpx 75rpx;
			button{
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 100rpx;
				font-size: 36rpx;
				background-color: #2073F5;
			}
		}
	}
</style>